<template>
  <div class="clear">
    <div class="clear">
      <div id="top1">
        <el-container>
          <el-header>
            <p>
              <span class="title">今日销售额</span> 菜品库存超出:0
              菜品库存过低:0
            </p>
          </el-header>
          <el-main id="sale">
            <div class="red">
              <p>0.00</p>
              今日总营收(元)
            </div>
            <div class="yellow">
              <p>0.00</p>
              今日优惠金额(元)
            </div>
            <div class="blue">
              <p>0.00</p>
              今日订单数
            </div>
            <div class="green">
              <p>0.00</p>
              今日退款金额(元)
            </div>
          </el-main>
        </el-container>
      </div>
      <div id="top2">
        <el-container>
          <el-header>
            <p><span class="title">营业动态</span></p>
          </el-header>
          <el-main>
            堂食订单(就餐中)
            <el-progress
              :percentage="50"
              :format="format"
              color="rgb(255,102,0)"
            ></el-progress>
            外卖订单(进行中)
            <el-progress
              :percentage="50"
              :format="format"
              color="rgb(255,102,0)"
            ></el-progress>
            当前预约人数
            <el-progress
              :percentage="50"
              :format="format"
              color="rgb(255,102,0)"
            ></el-progress>
            当前排号人数
            <el-progress
              :percentage="50"
              :format="format"
              color="rgb(255,102,0)"
            ></el-progress>
            <el-progress
              type="circle"
              :percentage="70"
              status="success"
              color="rgb(16,163,255)"
              id="circle"
              >总营收</el-progress
            >
          </el-main>
        </el-container>
      </div>
    </div>

    <el-container>
      <el-header>
        <p>今日菜品销售排行榜</p>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table
          :data="tableData"
          stripe:data="tableData"
          tooltip-effect="dark"
          :cell-style="{ border: '1px solid #DCDCDC' }"
          :header-cell-style="{
            background: '#F0F0F0',
            border: '1px solid #DCDCDC',
            color: '#000000',
          }"
          style="width: 100%"
        >
          <el-table-column
            prop="dishId"
            label="菜品编号"
            fixed="left"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="dishName"
            label="菜品名称"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column prop="price" label="单价" width="150" align="center">
          </el-table-column>
          <el-table-column
            prop="saleNumber"
            label="销售笔数"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="salePrice"
            label="销售金额"
            width="200"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="discount"
            label="折扣额度"
            fixed="right"
            align="center"
          ></el-table-column>
        </el-table>

        <!-- 页码 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 20, 25, 30]"
          :page-size="5"
          layout="total,sizes,prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.clear {
  content: "";
  clear: both;
  display: block;
}
#top1,
#top2 {
  width: 600px;
  float: left;
}
#top1 {
  margin-right: 20px;
}
#top2 .el-container{
  height: 484px;
}
#top2 .el-main{
  margin-top: 20px;
  padding: 40px;
}

#sale > div {
  width: 200px;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
}
.title {
  font-size: 25px;
  margin-right: 150px;
  color: rgb(102, 102, 102);
}
.red {
  background-color: rgb(255, 0, 0);
}
.yellow {
  background-color: rgb(255, 153, 0);
}
.blue {
  background-color: rgb(26, 165, 255);
}
.green {
  background-color: rgb(102, 204, 204);
}
#sale p {
  margin-top: 30px;
  font-size: 40px;
}
.el-container{
  border: 2px solid rgb(242, 242, 242);
  width: 92%;
}
.el-header {
  background-color: rgb(242, 242, 242);
  color: rgb(51, 51, 51);
  text-align: center;
  line-height: 60px;
}
#circle {
  margin-top: 20px;
}
.el-progress {
  width: 80%;
  margin-bottom: 10px;
}
.el-main {
  padding: 20px;
}
#tit {
  font-size: 20px;
}
.el-pagination {
  margin-top: 10px;
  text-align: center;
}
</style>
<script>
export default {
  data: function () {
    return {
      tableData: [
        {
          dishId: "001",
          dishName: "小炒肉",
          price: 18,
          saleNumber: 10,
          salePrice: 180,
          discount: 30,
        },
        {
          dishId: "002",
          dishName: "西红柿炒鸡蛋",
          price: 12,
          saleNumber: 5,
          salePrice: 60,
          discount: 5,
        },
      ],
      currentPage: 5,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}`;
    },
    // 批量选择
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>